<template>
    <div class="login-wrap">
      <div style="width: 100%;height: 40px;display: flex;justify-content: center;align-items:center;position: fixed;bottom: 0;left: 0;background-color: #ffffff;color: #4978FC;cursor: pointer;">
        <a href="https://beian.miit.gov.cn/">备案号：陕ICP备19008976号-1</a>
      </div>
        <div class="login-left"></div>
        <div class="login-right">
            <div class="login-form">
                <div class="login-title">
                    <img src="../../public/images/logo.jpg">
                    管理系统平台
                    <!-- <el-button @click="exportExcle">test</el-button> -->
                </div>
                <el-form :model="ruleForm" label-width="0px" ref="ruleForm" :rules="ruleFormRule" status-icon
                         class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model.trim="ruleForm.username" placeholder="用户名" @keyup.enter.native="getLogin"
                                  size="small">
                            <i slot="prefix" class="el-input__icon"><img class="input-icon"
                                                                         src="../assets/images/username.png"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密码" v-model.trim="ruleForm.password"
                                  @keyup.enter.native="getLogin" size="small">
                            <i slot="prefix" class="el-input__icon"><img class="input-icon"
                                                                         src="../assets/images/password.png"></i>
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button class="lg-btn" @click="getLogin" :loading="isLoading">登 录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import xlsx from "@/utils/xlsx"
  export default {
    data() {
      const vm = this
      let checkName = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('用户名不为空'))
        } else if (!vm.specialStr(value)) {
          return callback(new Error('请勿输入#%&?'))
        } else {
          callback()
        }
      }
      let checkPass = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码不为空'))
        } else if (!vm.specialStr(value)) {
          return callback(new Error('请勿输入#%&?'))
        } else {
          callback()
        }
      }
      return {
        isLoading: false,
        ruleForm: {
          username: '',
          password: ''
        },
        ruleFormRule: {
          username: [
            {required: true, validator: checkName, trigger: 'blur'}
          ],
          password: [
            {required: true, validator: checkPass, trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState({
        token: state => state.app.token
      })
    },
    mounted() {
    },
    methods: {
      ...mapActions(['getToken']),
      exportExcle(){
        let json =[
          [1,2,3],
          ["a","b","c"]
        ]
          xlsx.exportExcel(json)
      },
      getLogin() {
        const vm = this
        vm.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            vm.isLoading = true
            let response = await vm.getToken(vm)
            if (response && response.access_token) {
              localStorage.setItem('userName', vm.ruleForm.username)
              vm.$message({
                type: 'success',
                message: '登录成功！'
              })
              vm.isLoading = false
              vm.$router.push('/index')
            } else {
              vm.$message({
                type: 'error',
                message: response.data.error_description
              })
              vm.isLoading = false
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import "~/common.scss";

    .lg-btn {
        background: #579CFF;
        border-color: #579CFF;
        box-shadow: 0 6px 9px 0 rgba(26, 57, 179, 0.32);
        background: -webkit-linear-gradient(to right, #579CFF, #4977FC); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #579CFF, #4977FC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 50px;
        color: #fff !important;
    }

    .el-button--primary:active {
        transform: translateY(3px);
    }

    .login-wrap /deep/ .el-input__inner {
        background-color: transparent;
        border: 1px solid transparent;
        color: #A9A9A9;
        font-size: 18px;
        padding-left: 90px;
        padding-right: 30px;
        @include line-height(60px);
    }

    .login-wrap /deep/ .el-form-item {
        border-radius: 15px;
        background-color: #F8F8F8;
    }

    .login-wrap /deep/ .el-input__prefix {
        top: 10px;
        left: 30px;
    }

    .login-wrap /deep/ .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
        color: #A9A9A9;
    }

    .login-wrap /deep/ .el-input__inner:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #A9A9A9;
    }

    .login-wrap /deep/ .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #A9A9A9;
    }

    .login-wrap /deep/ .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #A9A9A9;
    }

    .login-wrap /deep/ .el-input__prefix {
        color: #A9A9A9;
    }

    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background: #fff;
        background-image: url(../../public/images/back.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        overflow: hidden;
    }

    .login-left {
        position: absolute;
        top: 30%;
        left: 12%;
        width: 38%;
        height: 50%;
        background-image: url(../../public/images/left.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
    }

    .login-right {
        position: absolute;
        top: 23%;
        right: 13%;
        width: 31%;
        height: 50%;
        padding: 0 45px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        .login-form {
            height: 100%;
            width: 100%;
            .login-title {
                img {
                  vertical-align: middle;
                    width:43px; height:43px
                }
                text-align: left;
                color: $blue;
                font-size: 42px;
                padding-bottom: 10%;
                font-family: "logo" !important;
            }
            .login-btn {
                margin-top: 18%;
                text-align: center;
                button {
                    width: 100%;
                    height: 60px;
                    font-size: 18px;
                    text-shadow: 1px 1.73px 2px 2px rgba(0, 0, 0, .5);
                }
            }
        }
    }

    @media screen and (max-width: 1024px){
      .login-right {
        top: 28%;
        right: 10%;
        width: 34%;
        .login-form {
          .login-title {
            font-size: 34px;
          }
        }
      }
    }
</style>
